
<template>
    <div :id="this.paramId" v-if="this.isShow" ref="map" class="map"></div>
    <div v-else class="mapClew">暂未获取位置信息</div>
</template>

<script>
    import { TMap } from "../../../utils/tcmap.js";
    export default{
        name:"腾讯地图显示位置",
        props:{
            paramId: String,
            value: String,
            company: String,
            latitude: String,
            longitude: String,
            isShow: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            console.log("qqMap...id: " + this.paramId);
            console.log("qqMap...value:" + this.value);
            this.isShow = (this.value != null && this.value.length > 0);
            if(this.isShow){
                var strArray = this.value.split(",");
                this.latitude = strArray[0];
                this.longitude = strArray[1];
                this.company = strArray[2];

                TMap().then(qq => {
                    var center = new qq.maps.LatLng(this.latitude,this.longitude);
                    var map = new qq.maps.Map(document.getElementById(this.paramId), {                        
                        center: center, // 地图的中心地理坐标。
                        zoom: 15
                    });
                    var left = (this.company.length / 2) * -15;
                    var cssC = {
                        fontSize:"12px",
                        fontWeight: "bold",
                        color: "#4B4BEB",
                        borderRadius: "5px",
                        border: 0,
                        padding: "2px 4px",
                        backgroundColor: "rgba(0,0,0,0.4)",
                        textShadow: "0 0 2px #FFF",
                        boxShadow:"1px 2px 5px #ccc",
                    };
                    var label = new qq.maps.Label({
                        position:center,
                        offset: new qq.maps.Size(left, -40),
                        map: map,
                        content:this.company
                    });
                    label.setStyle(cssC);
                });
            }            
        }
    }
</script>
<style scoped>
    .map{
        width:450px;
        height:260px;
        z-index: 0; 
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); 
        border-radius: 5px;
    }
    .mapClew{
        width: 180px;
        height: 30px;
        line-height: 30px; 
        text-align: center;
        font-size: 14px; 
        font-weight: bold;
        color: #999;
        background-color: #EEE;
    }
</style>
